<template>
    <div class="el-container">
      <div>
        <div class="nav_box">
          <div>
            <h4>报警记录</h4>
          </div>
          <div>
            <ul>
              <!-- <li>1</li>
              <li>2</li>
              <li>3</li>
              <li>4</li>
              <li>5</li>
              <li>6</li>
              <li>7</li>
              <li>8</li>
              <li>9</li>
              <li>0</li> -->
            </ul>
          </div>
        </div>
        <!-- ......................................................................... -->
  
        <template>
          <el-table
            :key="tableKey"
            :data="tableData"
            border
            fit
            highlight-current-row
            style="width: 100%"
            :header-cell-style="{ background: '#ccc' }"
          >
            <!-- v-loading="listLoading" -->
            <!-- @sort-change="sortChange" -->
            <!-- <el-table-column type="selection" align="center" /> -->
            <el-table-column label="序号" prop="序号" align="center" width="80">
              <!-- :class-name="getSortClass('序号')" -->
  
              <template slot-scope="scop">
                <span>{{ scop.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="设备IP" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.sbIP }}</span>
              </template>
            </el-table-column>
            <el-table-column label="设备编号" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.sbwbianhao }}</span>
              </template>
            </el-table-column>
            <el-table-column label="设备位置" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.sbweizhi }}</span>
              </template>
            </el-table-column>
            <el-table-column label="报警时间" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.bjTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="报警原因" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.tvliu }}</span>
              </template>
            </el-table-column>
            <el-table-column label="设备状态" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.sbzhuangtai }}</span>
              </template>
            </el-table-column>

  
            <!-- <el-table-column label="操作" align="center" min-width="141px" max-width="230px"
            class-name="small-padding fixed-width">
            <template slot-scope="{row,$index}">
              <el-button type="primary" size="mini" @click="handleUpdate(row.indexnum)">
                编辑
              </el-button>
              <el-button v-if="row.status != 'deleted'" size="mini" type="danger"
                @click="handleDelete(row.indexnum, $index)">
                删除
              </el-button>
            </template>
          </el-table-column> -->
          </el-table>
  
          
            <!-- 底部导航 -->
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="listQuery.pageIndex"
              :limit.sync="listQuery.pageSize"
              @pagination="getList"
            />
        </template>
      </div>
    </div>
  </template>
  <script>
  import Pagination from "@/components/Pagination"; // 底部导航组件
  
  export default {
    components: {Pagination},
    data() {
      return {
        //   listLoading: true,
        tableKey: 0,
        tabList: [
          {
            prop: "serial ",
            tab_title: "序号",
          },
          {
            prop: "ip",
            tab_title: "设备IP",
          },
          {
            prop: " place",
            tab_title: "设备位置",
          },
          {
            prop: " number",
            tab_title: "设备编号",
          },
          {
            prop: " timer",
            tab_title: "报警时间",
          },
          {
            prop: " state",
            tab_title: "设备状态",
          },
          {
            prop: " tv",
            tab_title: "视频流",
          },
        ],
        total:100,
        listQuery:{
          pageIndex:1,
          pageSize:10
        },
        tableData: [
          {
            sbIP: "192.268.25.1",
            sbweizhi: "1#楼",
            sbwbianhao: "12345678",
            bjTime: "2020-05-19 11：23：43",
            sbzhuangtai: "在线",
            tvliu: "设备离线",
          },
          {
            sbIP: "192.268.25.1",
            sbweizhi: "1#楼",
            sbwbianhao: "12345678",
            bjTime: "2020-05-19 11：23：43",
            sbzhuangtai: "在线",
            tvliu: "设备离线",
          },
          {
            sbIP: "192.268.25.1",
            sbweizhi: "1#楼",
            sbwbianhao: "12345678",
            bjTime: "2020-05-19 11：23：43",
            sbzhuangtai: "在线",
            tvliu: "设备离线",
          },
          {
            sbIP: "192.268.25.1",
            sbweizhi: "1#楼",
            sbwbianhao: "12345678",
            bjTime: "2020-05-19 11：23：43",
            sbzhuangtai: "在线",
            tvliu: "设备离线",
          },
          {
            sbIP: "192.268.25.1",
            sbweizhi: "1#楼",
            sbwbianhao: "12345678",
            bjTime: "2020-05-19 11：23：43",
            sbzhuangtai: "在线",
            tvliu: "设备离线",
          },
          {
            sbIP: "192.268.25.1",
            sbweizhi: "1#楼",
            sbwbianhao: "12345678",
            bjTime: "2020-05-19 11：23：43",
            sbzhuangtai: "在线",
            tvliu: "设备离线",
          },
          {
            sbIP: "192.268.25.1",
            sbweizhi: "1#楼",
            sbwbianhao: "12345678",
            bjTime: "2020-05-19 11：23：43",
            sbzhuangtai: "在线",
            tvliu: "设备离线",
          },
          {
            sbIP: "192.268.25.1",
            sbweizhi: "1#楼",
            sbwbianhao: "12345678",
            bjTime: "2020-05-19 11：23：43",
            sbzhuangtai: "在线",
            tvliu: "设备离线",
          },
          {
            sbIP: "192.268.25.1",
            sbweizhi: "1#楼",
            sbwbianhao: "12345678",
            bjTime: "2020-05-19 11：23：43",
            sbzhuangtai: "在线",
            tvliu: "设备离线",
          },
          {
            sbIP: "192.268.25.1",
            sbweizhi: "1#楼",
            sbwbianhao: "12345678",
            bjTime: "2020-05-19 11：23：43",
            sbzhuangtai: "在线",
            tvliu: "设备离线",
          },
          {
            sbIP: "192.268.25.1",
            sbweizhi: "1#楼",
            sbwbianhao: "12345678",
            bjTime: "2020-05-19 11：23：43",
            sbzhuangtai: "在线",
            tvliu: "设备离线",
          },
          {
            sbIP: "192.268.25.1",
            sbweizhi: "1#楼",
            sbwbianhao: "12345678",
            bjTime: "2020-05-19 11：23：43",
            sbzhuangtai: "在线",
            tvliu: "设备离线",
          },
          {
            sbIP: "192.268.25.1",
            sbweizhi: "1#楼",
            sbwbianhao: "12345678",
            bjTime: "2020-05-19 11：23：43",
            sbzhuangtai: "在线",
            tvliu: "设备离线",
          },
        ],
      };
    },
    methods:{
      getList(){
  
      }
    }
  };
  </script>
  <style lang="less">
  .el-container > div {
    width: 100%;
  }
  .nav_box {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    ul {
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-end;
      align-items: center;
    }
  }
  </style>